<template>
  <div class="road" @click="queryFlow">
    <el-tooltip
      class="item"
      effect="dark"
      content="实时路况"
      placement="bottom"
    >
      <img src="../assets/nav-img/lukuang.svg" alt="" />
    </el-tooltip>
  </div>
</template>

<script>
import { querySuccess } from '../../utils/queryFlow.js';

export default {
  methods: {
    queryFlow() {
      /* 1、创建一个用于查询的点形状 */
      var pointObj = new Zondy.Object.Point2D(114, 30);
      //设置查询点的搜索半径
      pointObj.nearDis = 50;

      /* 2、初始化查询结构对象，设置查询结构包含几何信息 */
      var queryStruct = new Zondy.Service.QueryFeatureStruct();
      //是否包含几何图形信息
      queryStruct.IncludeGeometry = true;
      //是否包含图形显示参数
      queryStruct.IncludeWebGraphic = true;

      /* 3、指定查询规则 */
      var rule = new Zondy.Service.QueryFeatureRule({
        //是否将要素的可见性计算在内
        EnableDisplayCondition: false,
        //是否完全包含
        MustInside: false,
        //是否仅比较要素的外包矩形
        CompareRectOnly: false,
        //是否相交
        Intersect: true,
      });
      /* 4、实例化查询参数对象 */
      var queryParam = new Zondy.Service.QueryParameter({
        geometry: pointObj,
        resultFormat: 'json',
        struct: queryStruct,
        rule: rule,
      });
      /* 5、实例化地图文档查询服务对象 */
      var queryService = new Zondy.Service.QueryDocFeature(
        queryParam,
        'guanggu',
        1,
        {
          ip: 'localhost',
          port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
        }
      );
      queryService.query(querySuccess);
    },
  },
};
</script>
<style>
.road {
  width: 40px;
  position: absolute;
  top: 16px;
  right: 112px;
}
.road img {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
</style>
